<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>手机端预览 - 老年人健康仪表盘</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    body { background: #f0f2f5; }
    .phone-frame { width: 390px; max-width: 100%; height: 844px; margin: 16px auto; border: 12px solid #222; border-radius: 32px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.2); overflow: hidden; position: relative; }
    .status-bar { height: 24px; background: #000; }
    .content { padding: 16px; height: calc(100% - 24px); overflow-y: auto; }
    .title { font-size: 20px; font-weight: 700; color: #165DFF; text-align: center; margin-bottom: 12px; }
    .card { border: 1px solid #e5e5e5; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
    .btn-primary { background-color: #165DFF; border-color: #165DFF; }
    .btn-success { background-color: #1db954; border-color: #1db954; }
    .small-muted { font-size: 12px; color: #888; }
    #glucose-chart { height: 260px; }
    #activity-heatmap, #health-radar { height: 220px; }
    /* 隐藏本地文件输入，在手机页仅用网络选择 */
    .hidden-input { display: none; }
    /* 内嵌备选选择器样式 */
    .inline-picker { display:none; border: 1px dashed #d0d0d0; border-radius: 8px; padding: 8px; margin-top: 8px; }
    /* 手机内覆盖层弹窗 */
    .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: none; z-index: 1000; }
    .overlay-panel { position: absolute; top: 8%; left: 5%; right: 5%; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 12px; max-height: 84%; overflow-y: auto; }
  </style>
</head>
<body>
  <div class="phone-frame">
    <div class="status-bar"></div>
    <div class="content">
      <div class="title">老年人健康仪表盘</div>

      <div class="card">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <div class="fw-bold">网络选择（从后端data目录）</div>
            <div id="net-selected-count" class="small-muted">已选择0个文件</div>
          </div>
          <div>
            <button id="fetch-list-btn" class="btn btn-sm btn-primary">选择文件</button>
            <button id="clear-selection-btn" class="btn btn-sm btn-outline-secondary">清空</button>
          </div>
        </div>
        <div class="mt-2 small-muted">请勾选 activity.csv、glucose.csv、clhls.csv 三个文件</div>
        <!-- 内嵌备选选择器（当Bootstrap模态不可用时显示） -->
        <div id="picker-inline" class="inline-picker">
          <div class="fw-bold mb-1">文件列表</div>
          <div id="picker-inline-list" class="list-group"></div>
          <div class="d-flex gap-2 mt-2">
            <button id="picker-inline-confirm-btn" class="btn btn-sm btn-primary">确定</button>
            <button id="picker-inline-cancel-btn" class="btn btn-sm btn-outline-secondary">取消</button>
          </div>
        </div>
        <button id="upload-btn" class="btn btn-success w-100 mt-2">上传</button>
        <div id="upload-success" class="alert alert-success mt-2" style="display:none;">数据上传成功！</div>

        <!-- 保留但隐藏的本地输入（与现有脚本兼容） -->
        <input type="file" id="activity-file" class="hidden-input" accept=".csv">
        <input type="file" id="glucose-file" class="hidden-input" accept=".csv">
        <input type="file" id="clhls-file" class="hidden-input" accept=".csv">
      </div>

      <div class="card">
        <div class="fw-bold mb-2">血糖趋势图</div>
        <div id="glucose-chart"></div>
      </div>

      <div class="card">
        <div class="fw-bold mb-2">行为热力图</div>
        <div id="activity-heatmap"></div>
      </div>

      <div class="card">
        <div class="fw-bold mb-2">健康评分雷达图</div>
        <div id="health-radar"></div>
      </div>
    </div>
  </div>

  <!-- 预警弹窗 -->
  <div class="modal fade" id="alert-modal" tabindex="-1" aria-labelledby="alert-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header" style="background:#165DFF;color:#fff;">
          <h5 class="modal-title" id="alert-modal-label">⚠️ 警告</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>血糖异常预警！</p>
          <p class="small-muted">请及时关注健康状况。</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 文件选择器模态框（网络列表） -->
  <div class="modal fade" id="pickerModal" tabindex="-1" aria-labelledby="pickerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="background:#165DFF;color:#fff;">
          <h5 class="modal-title" id="pickerModalLabel">请选择最多3个CSV</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="picker-list" class="list-group"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" id="picker-confirm-btn" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>